<template>
    <div class="square">
        <!-- 头部导航部分 -->
        <div class="tithead">
            <div>
                <i class="iconfont icon-xitongfanhui" @click="goback"></i>
                <span>歌单广场</span>
            </div>
        </div>

        <!-- 歌单分类-->
        <ul class="songcat">
          <li v-for="(item,index) in songCat" :key="item.id" @click="activecat(index)">
              <span>{{ item.name }}</span>
              <div :class="[ currentCat == index ? 'cur':'']" ></div>
          </li>
        </ul>

        <!-- 歌单列表 -->
        <RecommendMusic :recommendMusic="recommendMusic">
          
        </RecommendMusic>
    </div>
</template>

<script>
import RecommendMusic from 'components/recommendmusic/recommendmusic.vue'
import { getCatSong ,getSongList } from "api/songlist/index";
import { numberFormat } from 'utils/numformat.js'
export default {
    name: "square",
    components: {
      RecommendMusic
    },
    data() {
        return {
            // 类别
            songCat:[],
            currentCat: 0,
            recommendMusic:[]
        };
    },
    created(){
        this.getCatSongs()
        this.getSongLists()
    },
    methods: {
        goback() {
            this.$router.go(-1);
        },
        getCatSongs() {
            getCatSong().then((res) => {
                console.log(res);
                this.songCat = res.sub
            });
        },
        getSongLists(){
            getSongList().then(res => {
              console.log(res,'歌单')
              res.playlists.forEach((item) => {
                  item.playCount = numberFormat(item.playCount)
              })
              this.recommendMusic = res.playlists
            })
        },
        activecat(index){
            this.currentCat = index
        }
    },
};
</script>

<style scoped lang="scss">
.square {
    background-color: #fafafa;
    .tithead {
        padding: 0.1rem;
        .icon-xitongfanhui {
            margin-right: 0.1rem;
        }
    }

    // 歌单分类
    .songcat::-webkit-scrollbar {
        display: none;
    }
    .songcat{
      display: flex;
      overflow: hidden;
      overflow-x: scroll;
      li{
        white-space: nowrap;
        padding: .1rem 0rem;
        margin: 0px .1rem;
        position: relative;
        font-weight: bold;
        .cur{
          box-sizing: border-box;
          width: 100%;
          padding: .03rem;
          border-radius: .1rem;
          background-color: #FF4949;
          position: absolute;
          bottom: .08rem;
          left: 0px;
          // z-index: -1;
        }
      }
    }
}
</style>
